<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>距元旦还有</title>
</head>
<body>
  <div id="time"></div>
  <script>
    let dom = document.querySelector('#time');
    (function getNextYearDiffTime() {
      let year = new Date().getFullYear(),
          nextYear = year + 1,
          differTime = parseInt((new Date(`${nextYear}`).getTime() - new Date().getTime()) / 1000),
          day = Math.floor(differTime / (24 * 60 * 60)),
          hour = parseInt(((differTime - day * (24 * 60 * 60))) / 3600),
          minute = parseInt((differTime - day * (24 * 60 * 60) - hour * 60 * 60) / 60),
          second = differTime - day * (24 * 60 * 60) - hour * 60 * 60 - minute * 60;
      let timeStr = `距元旦还有：${day}天 ${hour}小时 ${minute}分钟 ${second}秒`
      dom.innerText = timeStr
      window.requestAnimationFrame(getNextYearDiffTime)
    })()
  </script>
</body>
</html>